REACT.JS
Links: https://reactjs.org/ and https://github.com/facebook/react
Introduction .
Hello everyone. My name is Irina. In this presentation, well look at a cool Java Script library called
React. We’ll get acquainted with its basics, find out what are the pros and cons. Here goes!
React is a JavaScript library for building user interfaces.
Renders your UI and responds to events
It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the
resulting differences, and then updates the browser’s displayed DOM efficiently.
One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered
on the server side, and they can work together interoperable
UI
WHY WAS REACT DEVELOPED?
Complexity of two-way data binding.
Bad UX from using "cascading updates" of DOM tree
A lot of data on a page changing over time
Complexity of Facebook's UI architecture
react is maintained by
GitHub stats:
WEBSITES USING REACT
Websites worldwide made with react
WHY SHOULD YOU USE REACT?
To read and understand views
Concept of components is the future of web development
If your page uses a lot of fast updating data or real time data - React is the way to go
Once you and your team is over the React's learning curve, developing your app will become a lot
faster
REACT: THE GOOD
EASY TO UNDERSTAND WHAT A COMPONENT WILL RENDER
Code → predictable code
You don't really need to study JS in the view file in order to understand what the file does
EASY TO MIX HTML AND JS
You do it already with template libraries (e.g. Handlebars, Mustache, Underscore etc.)
NO COMPLEX TWO-WAY DATA FLOW
Uses simple one-way reactive data flow
Easier to understand than two-way binding
Uses less code
REACT IS FAST!
Real DOM is slow
JavaScript is fast
Using virtual DOM objects enables fast batch updates to real DOM, with great productivity gains
over frequent cascading updates of DOM tree
REACT: THE "BAD"t that React is w.
You DON'T GET any of the following:
Event system (other than vanilla DOM events)
Any AJAX capabilities whatsoever
Any form of a data layer
Promises
Any application framework
BUILDING JSX REQUIRES SOME EXTRA WORK
But most of the work is already done for you by react-tools
NO SUPPORT FOR OLDER BROWSERS
React won't work with IE8
There some polyfills / shims that help
TRY REACT:
ONLINE PLAYGROUNDS:
CodePen, CodeSandbox
USE WEBPACK OR CREATE REACT APP:
Webpack 4, Create React App
FUNDAMENTALS
Most important terms in React
COMPONENT
Components are self-contained reusable building blocks of web application. React components are
basically just idempotent functions (same input produces same output). They describe your UI at any
point in time, just like a server-rendered app.
COMPONENT
The simplest way to define a component is to write a JavaScript function:
You can also use an ES6 class to define a component:
PROPS
Passed down to component from parent component and represents data for the component
accessed via this.props
STATE
Represents internal state of the component
Accessed via this.state
When a component's state data changes, the rendered markup will be updated by re-invoking
render() method
JSX
Arguably, one of the coolest things in React
Easier to read and understand large DOM trees
Translates to plain JavaScript using react-tools
XML-like syntax for generating component's HTML
VIRTUAL DOM
The virtual DOM is used for efficient re-rendering of the DOM
React aims to re-render the virtual tree only when the state changes
Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
Observes data changes (setState) and does dirty-checking to know when to re-render component
Whenever possible, does not update entire component in real DOM - only computes a patch
operation that updates part of the DOM
LIFECYCLE REACT APPLICATION
More information
Description: ReactJS provides a bunch of methods that are executed during different stages of components life. Those
are called lifecycle methods. Lifecycle methods are only available for class based components. For functional
components react provides hooks. Let’s go through this diagram.
Horizontally it is split into three main stages:
Mounting
Updating
Unmounting
Mounting
This is first stage each component goes through. During this stage component gets created and then mounted to the DOM.
First method that is being executed during this stage is constructor.
Updating
Next big stage is is updating. Methods of this stage get called every time props or state of the component get changed
or forceUpdate() gets called.
Unmounting
Last stage is unmounting and it has only one method - componentWillUnmount.This method is being called right before the
component is being removed from the DOM.It is a good place to perfom the cleanup and remove your event listeners or
timers that you might have added in componentDidMount.
Thanks for attention